<template>
  <div class="introduce-box">
    <cardPanel title="办事处介绍">
      <div class="intorduce-content">
        <img :src="introduce" />
        <div class="intorduce-text">
          <p>
            榆林市沙河路街道位于陕西省榆林市榆阳区，‌东至明珠大道、‌开源大道，‌西至铁路沿线，‌南至绕城路南段（‌榆马百米大道）‌，‌北至沙河路，‌总面积为11.58平方公里。‌ 该街道总户数为19730户，‌总人口为52351人。‌沙河路街道辖区内驻有中、‌省、‌市、‌区级直属单位165个，‌其中包括市、‌区两级政府设在本辖区。‌此外，‌该街道还有中小学5所，‌下设7个社区居委会，‌分54个居民小组，‌共有党员640名。‌沙河路街道的管理机构包括榆林市榆阳区沙河路街道办事处，‌该部门人员编制为45人，‌其中行政编制15人，‌事业编制30人；‌实有人员为55人，‌其中行政13人，‌事业42人。 
          </p>
        </div>
      </div>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
// 乡村介绍
import cardPanel from "@/components/cardPanel/index.vue";
import introduce from "@/assets/image/overview/introduce1.jpg";
</script>

<style lang="scss" scoped>
.introduce-box {
  width: 360px;
  height: 37.64%;
  margin-bottom: 10px;
}
.intorduce-content {
  position: relative;
  height: 100%;
  background: url("../../../assets/image/overview/introduce-bg.png") no-repeat 0
    0;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.intorduce-text {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  overflow: hidden;
  p {
    position: absolute;
    left: 0;
    bottom: -130px;
    width: 100%;
    height: 180px;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    overflow: auto;
    transition: bottom 0.5s;
    line-height: 26px;
  }
  &:hover{
    p{
      bottom: 0;
    }
  }
}
</style>
